Download Project

Introduction

In this post, I would like to explain Part 6 - Crud Operation Insert Data use AngularJS in ASP.NET MVC.
 

Steps:

Step-1: Add Controller  BatchController.cs.

Go to Solution Explorer > Controllers Folder> Add > Controller> Select MVC 5 Controller-Empty> Click ‘Add’ button> Give Controller Name ’ BatchController’ >  in this controller with writing the below code.

       public ActionResult AddNewInfo ()
        {
            return View();
        } 

In the AddNewInfo() Action Result Mouse right button Select Add View > Click Add Button> AddNewInfo.cshtml  page has been created.

Add Another Action result ListView()with writing the below code.

    public ActionResult ListView()
        {
            return View();
        }

In the ListView() Action Result Mouse right button Select Add View > Click Add Button> ListView.cshtml  page has been created.

Step-2: Create store Procedure for Insert Batch.

Go to SQL Server 2014 > dbStudentMangeSystem database> Programmability> stored procedures> Select New> stored procedure>Create sp_Insert_Batch with writing the below code.

create PROCEDURE [dbo].[sp_Insert_Batch]
	-- Add the parameters for the stored procedure here
	 @BatchName nvarchar(500)=null 
	 
AS
BEGIN
	-- SET NOCOUNT ON added to prevent extra result sets from
	INSERT INTO [dbo].[tblBatch]
           ([BatchName])
     VALUES
           (@BatchName)
END

Step-3: Modify   AddNewInfo.cshtml   Page.

AddNewInfo.cshtml page with writing the below code.

<div ng-app="ABCApp" ng-controller="BatchController" data-ng-init="GetOneRecord(@Convert.ToInt32(Request.QueryString["MasterId"]))">
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">Batch</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="../Batch/ListView">List View</a></li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">


                <div class="row">

                    <div class="col-md-3">
                        <div class="form-group">
                            <input type="text" ng-model="BatchDAO.BatchName" class="form-control" />
                        </div>
                    </div>
                </div>

                <div class="row">

                    <div class="col-md-3">
                        <input type="button" ng-click="SaveData()" class="btn btn-primary" value="{{btnSaveTextBatch}}" />
                    </div>
                </div>



            </div>
        </section>
    </div>
</div>

Step-4: Create Class  BatchDAL.cs.

Go to Solution Explorer > Create DAL Folder> In This DAL Folder > Click Add> Select Class> Give Class Name ’ BatchDAL’ > Click ‘Add’ button>   in this Class with writing the below code.

SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["MyConStr"].ConnectionString);

Step-5: Modify  Web.config.

Go to Solution Explorer > in this Web.config  with writing the below code.

   <add name="MyConStr" connectionString="Data Source=.;Initial Catalog=dbStudentMangeSystem;Integrated Security=True"
         providerName="System.Data.SqlClient" />

Step-6: Add some codes BatchDAL.cs  Class .

in this Class with writing the below code.

public void AddNewInfoDAL(BatchDAO aDao)
        {
            SqlCommand com = new SqlCommand("sp_Insert_Batch",conn);
            com.CommandType = CommandType.StoredProcedure;
            com.Parameters.AddWithValue("@BatchName", aDao.BatchName);
            conn.Open();
            com.ExecuteNonQuery();
            conn.Close();
        }

Step-7: Create Class  BatchDAO.cs.

Go to Solution Explorer > Create DAO Folder> In This DAO Folder > Click Add> Select Class> Give Class Name ’ BatchDAO’ > Click ‘Add’ button>   in this Class with writing the below code.

    public class BatchDAO
    {
        public int BatchId { get; set; }
        public string SL { get; set; }
        public string BatchName { get; set; }
    }

Step-8: Add some codes BatchController.cs Class for insert data .

in this Class with writing the below code.

 
      BatchDAL aDal= new BatchDAL();
 public JsonResult Save_Info(BatchDAO aDao)
        {
            string Mes = "";

            try
            {
                aDal.AddNewInfoDAL(aDao);
                Mes = "Operation Successful!!";
            }
            catch (Exception e)
            {
                Mes = "Operation Faild!!";
            }

            return Json(Mes, JsonRequestBehavior.AllowGet);
        }

Step-9: Create BatchControllerJS.js file.

 
Go to Solution Explorer > Scripts Folder.> AngularController Folder> Copy TestAngularControllerJS.js file >Paste this file  in AngularController Folder> change the file name like as ‘BatchControllerJS.js’ for insert Batch Name    with writing the below code.

var MyApp = angular.module("ABCApp", []);

MyApp.controller("BatchController", function($scope, $http) {
    $scope.btnSaveTextBatch = "Save";

    $scope.SaveData = function () {

        if ($scope.btnSaveTextBatch == "Save") {
            $scope.btnSaveTextBatch = "Saving.....";
            $http({
                method: 'POST',
                url: '/Batch/Save_Info',
                data: $scope.BatchDAO
            }).success(function(a) {
                $scope.btnSaveTextBatch = "Save";
                $scope.BatchDAO = null;
                alert(a);
            }).error(function() {
                alert("Faild");
            });
        }
};

Step-10: Add script link in   AddNewInfo.cshtml   Page.

AddNewInfo.cshtml page with writing the below code.

<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/AngularController/BatchControllerJS.js"></script>

Step-6: Run Application.